import React from 'react'
import { useState,useReducer } from 'react';
// 当状态是对象时,可以像class组件的this.setState({btn1:false})一样，更改状态里的某个属性值
// btnStateSet({btn1:false})
export const useReducerApi = {}
window.useReducerApi = useReducerApi
export default function Demo(props){
    let {onRender = ()=>{}} = props
    const [btnState, btnStateSet] = useReducer2((state,action)=>({...state,...action}), {
        btn1:true,
        btn2:true,
        btn3:true
    })
    onRender({btnStateSet,btnState})
	return (
		<div>
            <button disabled={btnState.btn1}>btn1</button>
            <button disabled={btnState.btn2}>btn2</button>
            <button disabled={btnState.btn3}>btn3</button>
		</div>
    )
}

// useReducer 是一种自定义hook
function useReducer2 (fn=()=>{},initVal) {
    const [state, setstate] = useState(initVal)
    const dispatch = (action) => {
        setstate(fn(state,action))
    }
    return [state,dispatch]
}

